/*
 * #depends subsonic-store.js
 */
Ext.ux.mattgoldspink.ArtistViewPanel = Ext.extend(Ext.Panel, {
    constructor: function(){
        Ext.apply(this, {
            items: [{
                xtype: 'list',
                fit: true,
                listeners: {
                    itemTap: this.handleItemTap
                },
                itemTpl: this.getSongViewTpl(),
                grouped: false,
                store: Ext.StoreMgr.get('Ext.ux.mattgoldspink.subsonic.stores.MusicStore'),
                itemSelector: '.row'
            }],
            cls: 'grid artist',
            fit: true,
            layout: 'fit'
        });
        Ext.ux.mattgoldspink.ArtistViewPanel.superclass.constructor.call(this);
    },
    getSongViewTpl: function(){
        return new Ext.XTemplate(
            '<div id="{id}" class="row">',
                '<img src="{[Ext.ux.mattgoldspink.subsonic.apiUrl]}/rest/getCoverArt.view?size=50&id={coverArt}&{[Ext.urlEncode(Ext.ux.mattgoldspink.subsonic.LoginDetails)]}" />',
                '<tpl if="isDir">',
                    '<div class="dir"><strong>{name}</strong></div>',
                '</tpl>',
                '<tpl if="isDir === false || isDir === undefined">',
                    '<div class="cell title"><strong>{[Ext.util.Format.ellipsis(values.name, 22)]}</strong></div>',
                    '<div class="cell">{[Ext.util.Format.ellipsis(values.artist, 22)]}</div>',
                    '<div class="cell">{[Ext.util.Format.ellipsis(values.album, 22)]}</div>',
                    '<div class="cell duration">{[this.renderDuration(values.duration)]}</div>',
                '</tpl>',
            '</div>',{
            renderDuration: function(duration) {
                var secs = (duration % 60).toString();
                while (secs.length < 2) {
                    secs = 0 + '' + secs;
                }
                return Math.floor(duration / 60) + ':' + secs;
            }    
        });
    },
    handleItemTap: function(dataView, index, item, evt){
        Ext.dispatch({
            controller: 'Ext.ux.mattgoldspink.subsonic.controllers.SongView',
            action    : 'loadFolder',
            historyUrl: 'artistView/'+item.id,
            id: item.id
        });
    }
});
